<template>
    <div class="detail-container">
        <div class="head-sub" v-show='blurFlag'>
            <headersub :name='name1' :action='action' ></headersub>
        </div>
        <div class="mui-scroll-wrapper mui-content detail-content" :class="{active: blurFlag && !checkFlag}">
            <div class="mui-scroll">
                <div class="setBg">
                    <addfriendssearchsub  v-on:fucallback='fucall'
                    v-on:fucallbackcheckFlag='fucallbackcheckFlag'></addfriendssearchsub>
                </div>
                <div>
                    <p class="newtext">新的朋友</p>
                    <ul class="mui-table-view addfriend-history">
                        <li class="mui-table-view-cell mui-media new-li-text" v-for="(item, index) in friendsArr" :key='index'>
                            <div class="mui-slider-right mui-disabled">
                                <span class="mui-btn mui-btn-red mui-btn-delete" :data-jid='item.fromJid'>删除</span>
                            </div>
                            <div class="mui-slider-handle">
                                <img class="mui-media-object mui-pull-left"
                                :src="$imHeadIcon">
                                <div class="mui-media-body">
                                    {{item.from}}
                                    <p class='mui-ellipsis'>{{item.status}}</p>
                                </div>
                                <span class="btn-choose">
                                    <span class="mui-btn" v-if='item.read&&item.agree'>已添加</span>
                                    <span class="mui-btn" v-else-if='item.read&&!item.agree'>已拒绝</span>
                                    <span v-else>
                                        <span class="mui-btn mui-btn-success receive" :data-jid='item.fromJid'>接受</span>
                                        <span class="mui-btn mui-btn-danger refuse" :data-jid='item.fromJid'>拒绝</span>
                                    </span>
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// import headersub from './HeaderSub'
import headersub from '../public/header/HeaderSubAction'
import addfriendssearchsub from '../public/header/AddFriendsSearchSub'
// import {RESET_REVCIEVE_FRIENDS_POST} from '../../store/mutation-types'
import {mapState, mapActions} from 'vuex'
  export default {
      data() {
          return {
              name1: this.$route.query.name,
              action: this.$route.query.action,
              blurFlag: true,
              checkFlag: false
            //   btnValue: '接受'
          }
      },
      components: {
          headersub,
          addfriendssearchsub
      },
      mounted() {
         this.init()
        //  console.log(this.action, '9999999999999999999')
      },
      computed: {
          ...mapState({
              friendsArr: state => state.onPresenceFriends
          })
      },
      methods: {
        //   ...mapMutations({resetRevcieveFriendsPost: RESET_REVCIEVE_FRIENDS_POST}),
          ...mapActions(['resetCurrentuserFriendlist', 'resetAddFriendsPost', 'deleteAddNewFriends']),
          init() {
              var self = this
              self.$immui.init({
                  // 滑动回弹
                swipeBack: false,
                // 手势事件设置
                gestureConfig: {
                    // 单击
                    tap: true,
                    // 长按
                    longtap: true,
                    // 滑动
                    swipe: true
                }
              })
                // mui滚动函数
            self.$immui('.mui-scroll-wrapper').scroll()
            //   接受好友请求
            self.$immui('.detail-container').on('tap', '.receive', function(e) {
                  console.log('点击看接受好友的请求', this.getAttribute('data-jid'))
                //   如果按钮为接受的话，执行下面代码
                    let itemJid = this.getAttribute('data-jid')
                    let item = self.friendsArr.find(f => f.fromJid === itemJid)
                    console.log(item)
                    let friendsObj = {}
                    friendsObj['ask'] = item['original_type']
                    friendsObj['group'] = []
                    friendsObj['jid'] = item['fromJid']
                    friendsObj['name'] = item['from']
                    friendsObj['subscription'] = 'both'
                    friendsObj['headicon'] = ''

                    // 1.修改vuex的好友列表， 点击跳转向另一个页面，完善剩余的信息 action 里面包含mutation
                    // vuex好友结构
                    // 2.修改数据库好友列表信息
                     // 3.修改数据库添加的好友的信息 state.onPresenceFriends agreetrue read true readNum 观察有没有变换
                    self.resetCurrentuserFriendlist(friendsObj)
                    // 修改数据库agreetrue read true
                    let obj = {jid: item['fromJid'], read: true, agree: true}
                    self.resetAddFriendsPost(obj)
                    // let obj = {jid: friendObj.jid, read: true, agree: true}
                    // 修改收到好友请求的的内容，已经移动到action文件执行
                    // commit(types.RESET_REVCIEVE_FRIENDS_POST, obj)
                    // 4.环信好友处理
                        // 收到联系人订阅请求的处理方法，具体的type值所对应的值请参考xmpp协议规范
                    let handlePresence = function (e) {
                        // 对方收到请求加为好友
                        if (e.type === 'subscribe') {
                            // 同意添加好友操作的实现方法
                            self.$imconn.subscribed({
                            to: e.from,
                            message: '[resp:true]'
                            })
                            // 需要反向添加对方好友
                            self.$imconn.subscribe({
                            to: e.from,
                            message: '[resp:true]'
                            })
                        }
                    }
                    handlePresence(item)
              })
              // 拒绝好友请求
            self.$immui('.detail-container').on('tap', '.refuse', function(e) {
                    console.log('点击看拒绝好友的请求', this.getAttribute('data-jid'))
                //   如果按钮为拒绝的话，执行下面代码
                    let itemJid = this.getAttribute('data-jid')
                    let item = self.friendsArr.find(f => f.fromJid === itemJid)
                    console.log(item)
                    // 修改数据库agreefalse read true
                    let obj = {jid: item['fromJid'], read: true, agree: false}
                    // self.resetRevcieveFriendsPost(obj)
                    self.resetAddFriendsPost(obj)
                    // 4.环信好友处理
                        // 收到联系人订阅请求的处理方法，具体的type值所对应的值请参考xmpp协议规范
                    let handlePresence = function (e) {
                        // 对方收到请求加为好友
                        if (e.type === 'subscribe') {
                            // 拒绝添加好友操作的实现方法
                            self.$imconn.unsubscribed({
                            to: e.from,
                            message: 'rejectAddFriend'
                            })
                        }
                    }
                    handlePresence(item)
              })
            // 左滑函数
            var btnArray = ['确认', '取消']
            self.$immui('.addfriend-history').on('tap', '.mui-btn-delete', function(event) {
                var elem = this
                var li = elem.parentNode.parentNode
                self.$immui.confirm('确认删除该条记录？', '添加好友', btnArray, function(e) {
                    if (e.index === 0) {
                        console.log(elem.getAttribute('data-jid'))
                        let itemJid = elem.getAttribute('data-jid')
                        // let item = self.friendsArr.find(f => f.fromJid === itemJid)
                        // console.log(item)
                        // li.parentNode.removeChild(li)
                        self.deleteAddNewFriends(itemJid)
                        setTimeout(function() {
                            self.$immui.swipeoutClose(li)
                        }, 0)
                        // 这里需要使用vuex将总的数据列表里面的数据一并删除
                        // vuex onPresenceFriends删除一整项
                        // 数据库 删除 addNewFriends中的一项
                        // elem.setAttribute('data-jid', itemJid + 1)
                        // li.parentNode.append(li)
                        // li.parentNode.removeChild(li)
                    } else {
                        setTimeout(function() {
                            self.$immui.swipeoutClose(li)
                        }, 0)
                    }
                })
            })
          },
          fucall(flag) {
              this.blurFlag = flag
            //   console.log(flag)
          },
          fucallbackcheckFlag(flag) {
              this.checkFlag = flag
          }
      }
  }
</script>
<style lang='scss' scoped>
.detail-container {
    z-index: 12;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    .detail-content{
        z-index: 12;
    }
}
.head-sub {
    height: 44px;
    position: relative;
}
.new-li-text{
    position: relative;
    top: 0;
    left: 0;
}
.btn-choose{
    position: absolute;
    top: 14%;
    right: 0;
}
.mui-scroll-wrapper{
    top: 0px;
    &.active{
        top: 46px;
    }
}
.setBg{
    background: white;
}
.newtext{
    line-height: 40px;
    margin-bottom: 0;
    padding-left: 4px;
}
</style>
